<template>
  <div id="app">
       <div class="footer">
			<ul>
				<li class="lis" @click="fn()"><img src="../assets/images/gouf_514.png" alt="">
					<p>购物</p>
				</li>
				<li class="lis" @click="fn2()"><img src="../assets/images/gouf_h56.png" alt="">
					<p>购物车</p>
				</li>
				<li class="lis" @click="fn3()"><img src="../assets/images/gouf_h57.png" alt="">
					<p>我的主页</p>
				</li>
				<li class="lis" @click="fn4()"> <img src="../assets/images/购物_640_03_01h.png" alt="">
					<p>个人中心</p>
				</li>
			</ul>
		</div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
    }
  },
  created(){
//	this.lis();
  	var lis=	document.getElementsByClassName('.lis');
  	console.log(lis);
  },
  methods:{
  	fn(){
  		this.$router.push({
				path:"/main"
			})
  	},
  	fn2(){
  		this.$router.push({
				path:"/cart"
			})
  	},
		fn4(){
  		this.$router.push({
				path:"/user"
			})
  	},
  	fn3(){
  		this.$router.push({
				path:"/my"
			})
  	}	
  }
}
</script>

<style scoped="scoped">
  *{
  	list-style: none;
  	margin: 0;
  	padding: 0;
  	margin: 0 auto;
  }
 .footer {
		display: flex;
		position: fixed;
		bottom: 0;
		height: 12vh;
		justify-content: flex-start;
		background: white;
	}
	
	.footer ul {
		list-style: none;
		display: flex;
		height: 10vh;
		justify-content: flex-start;
	}
	
	.footer li {
		width: 25%;
	}
	
	.footer img {
		width: 100%;
	}
	
	.footer p {
		text-align: center;
		color: #bbbbbb;
	}
</style>
